<template>
  <div class="member-package">
    <el-tabs tab-position="left" v-model="memberActiveName">
      <el-tab-pane
        :label="vip.vipName"
        :name="vip.id.toString()"
        v-for="(vip, index) in VIPList"
        :key="index"
      >
        <el-form :rules="vipRule" :data="VIPInfo" v-if="vip.id == 1">
          <el-form-item prop="vipName" label="名称">
            <el-input v-model="VIPInfo.vipName"></el-input>
          </el-form-item>
          <!-- <el-form-item prop="name" label="可观看分类">
            <el-checkbox-group v-model="VIPInfo.sort">
              <el-checkbox v-for="sort in sortArray" :label="sort" :key="sort"></el-checkbox>
            </el-checkbox-group>
          </el-form-item> -->
          <el-form-item prop="discount" label="会员购买折扣">
            <el-input :max="100" :min="0" v-model="VIPInfo.discount"></el-input>
          </el-form-item>
          <el-form-item label="付费包">
            <el-checkbox
              v-for="(product, index) in VIPInfo.vipProductForm"
              :key="index"
              class="price-item"
              v-model="product.enable"
            >
              <span class="">{{ getVipPackage(product.month) }}:购买价</span>
              <el-input placeholder="66" v-model="product.price"></el-input>
              <span class="">划线原价：</span>
              <el-input placeholder="666" v-model="product.showPrice"></el-input>
            </el-checkbox>
            <p style="color: red">*打钩才生效</p>
          </el-form-item>
          <el-form-item label="会员特权渲染图">
            <upload-resource
              is-public
              @upload="(img) => (VIPInfo.publicityImg = img.url)"
              folder="other"
            ></upload-resource>
            <img :src="VIPInfo.publicityImg" v-if="VIPInfo.publicityImg" />
          </el-form-item>
          <el-form-item>
            <el-button @click="save">保存</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import { FormRuleConf } from '@/config';
  import UploadResource from 'comp/UploadResource';
  const MONTH = [1, 3, 12];
  export default {
    components: {
      UploadResource,
    },
    data() {
      return {
        memberActiveName: '1',
        sortArray: ['全部', '剪辑', '合成', '建模', '特效'],
        VIPList: [],
        VIPInfo: {
          vipProductForm: [],
        },
        ...FormRuleConf.VIP,
      };
    },
    mounted() {
      this.getVipList();
      this.getVipInfo();
    },
    methods: {
      /**
       * 获取vip列表
       */
      getVipList() {
        this.$service.VipList().then((res) => {
          this.VIPList = res;
        });
      },
      /**
       * 获取VIP信息
       */
      getVipInfo() {
        this.$service
          .VipInfo({
            id: this.memberActiveName,
          })
          .then((res) => {
            this.VIPInfo = res;
            MONTH.map((item) => {
              const vm = this.VIPInfo.vipProductForm.find((i) => i.month === item);
              if (vm) {
                this.$set(vm, 'enable', true);
              } else {
                this.VIPInfo.vipProductForm.push({
                  month: item,
                  enable: false,
                  price: '',
                  showPrice: '',
                });
              }
            });
          });
      },
      getVipPackage(month) {
        const monthLabel = { m1: '月包', m3: '季包', m12: '年包' };
        return monthLabel[`m${month}`];
      },
      save() {
        let canReq = true;
        const enablePrice = this.VIPInfo.vipProductForm.filter((i) => {
          if (i.enable && !i.price) {
            this.$message.error('怎么不填价格的');
            canReq = false;
          }
          return i.enable;
        });
        if (!canReq) return;
        this.VIPInfo.vipProductForm = enablePrice;
        this.$service
          .VipSave(this.VIPInfo, {
            ...JSON_HEADER,
          })
          .then((res) => {
            this.getVipInfo();
            this.$message.success('保存成功!');
          });
      },
    },
  };
</script>

<style lang="less" scoped>
  .member-package {
    padding: 30px 0;
    width: 100%;
    height: 100%;
    .price-item {
      margin-left: 60px;
      font-size: 14px;
      display: block;
      span {
        margin-right: 10px;
        margin-left: 10px;
      }
      .el-input {
        width: 300px;
      }
    }
  }
</style>
